<template>
	<view>
		<view class="list">
			<view class="" style="display: flex">
				<view style="margin-right: 16rpx">
					<image :src="$attrs[field.portraitUrl]" style="width: 128rpx; height: 128rpx; border-radius: 50%" mode="aspectFill"></image>
				</view>
				<view class="">
					<view class="top flex_center">
						<view class="top_tittle" @click="clickItem">{{ $attrs[field.name] }}</view>
						<up-icon v-if="!store.isFuJing() && store.isMe( $attrs.userId) && ! $attrs.reportStatus" size="32rpx" :name="config.getImage('more')" @click="operate"></up-icon>
					</view>
					<view style="padding-bottom: 32rpx" @click="clickItem">
						<view class="time" style="margin: 16rpx 0">
							<view class="state_view" v-if="field.status" :class="stateData[$attrs[field.status]].className">
								<view class="drop"></view>
								<view class="state font28">{{ stateData[$attrs[field.status]].name }}</view>
							</view>
						</view>
						<view class="address" v-if="screenData == 1">
							<image :src="$attrs[field.countryUrl]" mode=""
								style="width: 49rpx;height: 48rpx;margin-right: 10rpx;border-radius: 50%;"></image>
							<view class="text">{{$attrs[field.country]}}</view>
						</view>
						<view class="address" style="margin: 0">
							<view class="text" v-if="$attrs[field.sex] == 1">男</view>
							<view class="text" v-if="$attrs[field.sex] == 2">女</view>
							<view class="text" style="margin: 0 20rpx">
								{{ $attrs[field.age] ? $attrs[field.age] + '岁' : '' }}
								<!-- <text v-if="$attrs[field.age]">岁</text> -->
							</view>
							<view class="text">{{ $attrs[field.nationals] }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottomStyle" v-if="$attrs[field.actualPlace]">
			<up-icon size="32rpx" :name="config.getImage('address')"></up-icon>
			<view class="text" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
				{{ $attrs[field.actualPlace] }}
			</view>
		</view>
	</view>
</template>
<script setup>
import config from '@/config.js';
import { usersStore } from 'store/users.js';

const store = usersStore();
const props = defineProps({
	stateData: {
		type: Object,
		default: () => ({
			1: {
				name: '未核查',
				className: 'red'
			},
			2: {
				name: '已核查',
				className: 'green'
			},
			3: {
				name: '已上报',
				className: 'blue'
			}
		})
	},
	screenData: {
		default: 0
	},
	field: {
		type: Object,
		default: () => ({
			title: 'title',
			address: 'address',
			time: 'time',
			content: 'content',
			type: 'type',
			state: 'state',
			id: 'id'
		})
	}
});

const emit = defineEmits(['operate', 'clickItem']);
const operate = () => {
	emit('operate', '点操作了');
};
const clickItem = (id) => {
	emit('clickItem', '点击了');
};
</script>

<style lang="scss" scoped>
.list {
	padding: 32rpx 32rpx 0 32rpx;
	position: relative;
	background: #ffffff;
	border-radius: 16rpx;
	.address,
	.time {
		display: flex;
		align-items: center;
	}
	.address {
		margin: 16rpx 0;
	}
	.text {
		font-family: 'SourceHanSansTC, SourceHanSansTC';
		font-weight: 400;
		font-size: 28rpx;
		color: #888888;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		margin-left: 8rpx;
	}
	.top {
		.top_tittle {
			width: 460rpx;
			height: 52rpx;
			font-family: 'SourceHanSansTC, SourceHanSansTC';
			font-weight: bold;
			font-size: 36rpx;
			color: #222222;
			line-height: 52rpx;
			text-align: left;
			font-style: normal;
			overflow: hidden;
		}
	}
}
.bottomStyle {
	height: 78rpx;
	background-color: #dee4ed;
	border-radius: 16rpx;
	margin-bottom: 28rpx;
	margin-top: -12rpx;
	padding: 5rpx 30rpx 0rpx 30rpx;
	display: flex;
	align-items: center;

	.text {
		font-family: 'SourceHanSansTC, SourceHanSansTC';
		font-weight: 400;
		font-size: 28rpx;
		color: #888888;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		margin-left: 8rpx;
	}
}
</style>
